<!--
 * @Descripttion:
 * @Author: liuxiaoling
 * @Date: 2021-03-22 19:07:54
 * @LastEditors: liuxiaoling
 * @LastEditTime: 2021-04-03 23:08:19
-->
<template>
  <div class="app" id="app">
    <!-- <van-row type="flex" justify="space-around" align="center" class="download_app" v-if="isShowSlogan * 1">
      <van-col span="16" class="logo_slogan">
        <van-image width="1rem" height="1rem" :src="logoImg" round fit="cover" class="logo_img" />
        <div>工作确定生活，事业成就你我。</div>
      </van-col>
      <van-col span="8" class="download_close">
        <van-button type="info" color="#FB5435" size="mini" class="download" @click="downloadAppUrl"
          >下载APP</van-button
        >
        <van-icon name="cross" class="close" @click="handleSlogan" />
      </van-col>
    </van-row> -->

    <!--  将组件缓存状态  -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

    <van-popup v-model:show="showVersion" round :overlay="true" data-disable-auto-close="false">
      <div class="version_box">
        <div class="title_version">版本更新</div>
        <div class="describe_version">当前软件有新版本，{{ android_remark }},请确认更新</div>
        <div class="btn">
          <a class="apk_url" :href="apkUrl">确认</a>
        </div>
      </div>
    </van-popup>

    <div style="height: 46px; visibility: hidden" v-show="$route.meta.isShowTabBar"></div>

    <!--  底部的tabBar是否显示   -->
    <TabBar v-show="$route.meta.isShowTabBar"></TabBar>
  </div>
</template>
<script>
import config from '../package.json'
import comTabBar from './components/TabBar'
import {initConfig} from './utils/initConfig'
import $ from 'jquery'
import signalR from './jquery.signalR-1.2.1.js'
import {Toast} from 'vant'
import logo from './assets/logo.png'
import { setInterval } from 'timers';

export default {
  name: 'App',
  data() {
    const isShow = localStorage.getItem('isActionSlogan') || 1
    return {
      logoImg: logo,
      // 0 是false（不显示）, 1是true（显示）
      isShowSlogan: isShow,
      version: config.version, // 获取包的信息
      userInfo: '',
      showVersion: false,
      android_remark: '',
      apkUrl: ''
    }
  },
  created() {
    /*
     * 注意: 若以后新添加代码，请在后面追加，不然一旦报错，则整个项目就挂了!!!
     * */
    let that=this;
    let user = JSON.parse(localStorage.getItem('userInfo'))
    //that.signaR.connectServer(user.id)
    if (localStorage.getItem('allCertificate')) {
      let resultInfo = JSON.parse(localStorage.getItem('userInfo'))
      that.$store.commit('set_user_AllInfo', {resultInfo})
    }
    // 初始化配置信息
    initConfig()

    // this._getAppUrl()
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  },

  methods: {
    async _getAppUrl() {
      const res = await this.$api.others.reqDownLoadUrl()
      console.log(res)
      if (res.code === 200) {
        this.iosLinkUrl = res.data.ios_url
        this.appLikUrl = res.data.android_url
        this.webLikUrl = res.data.web_url
      }
    },

    handleSlogan() {
      localStorage.setItem('isActionSlogan', '0')
      this.isShowSlogan = 0
    },

    downloadAppUrl() {
      if (this.appLikUrl) {
        // 下载
        window.open(this.appLikUrl, '_blank')
      } else {
        Toast('App下载地址出错，请联系管理员！')
      }
    }
  },
  components: {
    TabBar: comTabBar
  }
}
</script>

<style lang="scss" scoped>
.app {
  width: 100%;
}
.van-cell {
  align-items: center;
}
.version_box {
  width: 300px;
  padding: 20px 0;
}
.title_version {
  width: 100%;
  text-align: center;
  font-size: 16px;
}
.describe_version {
  padding: 20px 15px;
  text-align: center;
}
.btn {
  padding-top: 10px;
  width: 100%;
  border-top: 1px solid #ccc;

  text-align: center;
}
.apk_url {
  color: red;
  font-size: 16px;
}

.download_app {
  font-size: 13px;
  padding: 6px 10px;
  background-color: #ffffff;
  color: #323233;
  //font-family: Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
  box-shadow: 0 0.05333rem 0.32rem;
  .logo_slogan {
    vertical-align: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: bolder;
    .logo_img {
      margin-right: 10px;
    }
  }
  .download_close {
    vertical-align: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .download {
      margin-right: 10px;
      letter-spacing: 1.3px;
      text-align: justify;
    }

    .close {
      font-size: 20px;
      color: #7c7c7c;
    }
  }
}
</style>
